<header
  class="sl-r-banner"
  itemtype="https://schema.org/WPHeader"
  itemscope="itemscope"
  role="banner">
  {% for alert in alerts | default: [] %}
    {% if alert.color %}
      {% assign style = "--sl-background--alert: " | append: alert.color %}
    {% endif %}
    <div class="sl-c-alert" style="{{ style }}">
      <div class="sl-l-container">
        {% if alert.heading %}
          <h2 class="sl-c-alert-title">{{ alert.heading }}</h2>
        {% endif %}
        {{ alert.body | markdown }}
      </div>
    </div>
  {% endfor %}

  <div class="sl-c-pop-stripe"></div>
  <div class="sl-l-container">
    <div class="sl-l-grid sl-l-grid--full sl-l-large-grid--fit sl-l-large-grid--center sl-l-large-grid--gutters">
      <p class="sl-l-grid__column sl-r-banner__brand">
        <a href="/"><img
            height="48"
            alt="Sass"
            src="/assets/img/logos/logo.svg"></a>
      </p>

      {% renderFile 'source/_includes/header_nav.md' %}
    </div>
  </div>
</header>
